<!--
 * @Author: yan_hai_dong 891236760@qq.com
 * @Date: 2022-06-09 15:31:54
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @LastEditTime: 2022-06-20 10:45:16
 * @FilePath: \app\src\views\el\drag\TableRowSetUp\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="table-row-setup">
    <el-popover
      popper-class="table-row-setup__popper"
      placement="bottom-start"
      width="200"
      trigger="click"
    >
      <!-- <svg-icon
        icon-class="sort_decending"
        slot="reference"
        class="table-row-setup__icon"
      /> -->
      <div slot="reference" class="table-row-setup__icon"></div>
      <div class="content">
        <div class="header">
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          >
            列展示
          </el-checkbox>
          <!-- <el-button type="text" @click="reset">重置</el-button> -->
        </div>
        <MyScrollbar>
          <div style="max-height: 500px">
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <!-- 固定在左侧 -->
              <p v-if="citiesLeft.length" class="group-title">固定在左侧</p>
              <draggable
                v-model="citiesLeft"
                chosen-class="chosen"
                force-fallback="true"
                group="people"
                animation="100"
                ghost-class="ghost"
                handle=".move"
                filter=".forbid"
                @start="start"
                @end="end"
              >
                <transition-group>
                  <div
                    v-for="(element, i) in citiesLeft"
                    :key="`left_${i}`"
                    class="row-item"
                  >
                    <div
                      :class="[
                        'move',
                        'checkbox_item',
                        {
                          forbid:
                            element.forbid ||
                            !checkedCities.includes(element.prop),
                        },
                      ]"
                    >
                      <el-checkbox
                        :label="element.prop"
                        :disabled="disabledItem == element.prop"
                      >
                        <span>{{ element.label }}</span>
                      </el-checkbox>
                    </div>
                    <div
                      v-show="
                        !element.forbid && checkedCities.includes(element.prop)
                      "
                      class="ntns"
                    >
                      <!-- 不固定 -->
                      <!-- <span title="不固定">
                      <svg-icon
                        slot="reference"
                        icon-class="icon_app_n"
                        @click="moveHandle('citiesLeft', i)"
                      />
                    </span> -->
                      <el-tooltip
                        content="取消固定"
                        placement="bottom"
                        effect="light"
                      >
                        <div
                          class="no_fixd"
                          @click="moveHandle('citiesLeft', i)"
                        ></div>
                      </el-tooltip>
                      <!-- 固定右侧 -->
                      <!-- <span title="固定右侧">
                      <svg-icon
                        slot="reference"
                        icon-class="icon_app_n"
                        @click="moveHandle('citiesLeft', i, 'toRight')"
                      />
                    </span> -->
                      <el-tooltip
                        content="固定在表格右侧"
                        placement="bottom"
                        effect="light"
                      >
                        <div
                          class="to_right"
                          @click="moveHandle('citiesLeft', i, 'toRight')"
                        ></div>
                      </el-tooltip>
                    </div>
                    <div
                      :class="[
                        'move',
                        'move_icon',
                        {
                          forbid:
                            element.forbid ||
                            !checkedCities.includes(element.prop),
                        },
                      ]"
                    ></div>
                  </div>
                </transition-group>
              </draggable>
              <!-- 中间的 -->
              <p
                v-if="
                  (citiesLeft.length || citiesRight.length) && cities.length
                "
                class="group-title"
              >
                不固定
              </p>
              <draggable
                v-model="cities"
                chosen-class="chosen"
                force-fallback="true"
                group="people"
                animation="100"
                ghost-class="ghost"
                handle=".move"
                filter=".forbid"
                @start="start"
                @end="end"
              >
                <transition-group>
                  <div
                    v-for="(element, i) in cities"
                    :key="i + 100"
                    class="row-item"
                  >
                    <div
                      :class="[
                        'move',
                        'checkbox_item',
                        {
                          forbid:
                            element.forbid ||
                            !checkedCities.includes(element.prop),
                        },
                      ]"
                    >
                      <el-checkbox
                        :label="element.prop"
                        :disabled="disabledItem == element.prop"
                      >
                        <span>{{ element.label }}</span>
                      </el-checkbox>
                    </div>
                    <div
                      v-show="
                        !element.forbid && checkedCities.includes(element.prop)
                      "
                      class="ntns"
                    >
                      <!-- 固定左侧 -->
                      <!-- <span title="固定左侧">
                      <svg-icon
                        slot="reference"
                        icon-class="icon_app_n"
                        @click="moveHandle('cities', i, 'toLeft')"
                      />
                    </span> -->
                      <el-tooltip
                        content="固定在表格左侧"
                        placement="bottom"
                        effect="light"
                      >
                        <div
                          class="to_left"
                          @click="moveHandle('cities', i, 'toLeft')"
                        ></div>
                      </el-tooltip>
                      <!-- 固定右侧 -->
                      <!-- <span title="固定右侧">
                      <svg-icon
                        slot="reference"
                        icon-class="icon_app_n"
                        @click="moveHandle('cities', i, 'toRight')"
                      />
                    </span> -->
                      <el-tooltip
                        content="固定在表格右侧"
                        placement="bottom"
                        effect="light"
                      >
                        <div
                          class="to_right"
                          @click="moveHandle('cities', i, 'toRight')"
                        ></div>
                      </el-tooltip>
                    </div>
                    <div
                      :class="[
                        'move',
                        'move_icon',
                        {
                          forbid:
                            element.forbid ||
                            !checkedCities.includes(element.prop),
                        },
                      ]"
                    ></div>
                  </div>
                </transition-group>
              </draggable>
              <!-- 固定在右侧 -->
              <p v-if="citiesRight.length" class="group-title">固定在右侧</p>
              <draggable
                v-model="citiesRight"
                chosen-class="chosen"
                force-fallback="true"
                group="people"
                animation="100"
                ghost-class="ghost"
                handle=".move"
                filter=".forbid"
                @start="start"
                @end="end"
              >
                <transition-group>
                  <div
                    v-for="(element, i) in citiesRight"
                    :key="`right_${i}`"
                    class="row-item"
                  >
                    <div
                      :class="[
                        'move',
                        'checkbox_item',
                        {
                          forbid:
                            element.forbid ||
                            !checkedCities.includes(element.prop),
                        },
                      ]"
                    >
                      <el-checkbox
                        :label="element.prop"
                        :disabled="disabledItem == element.prop"
                      >
                        <span>{{ element.label }}</span>
                      </el-checkbox>
                    </div>
                    <div
                      v-show="
                        !element.forbid && checkedCities.includes(element.prop)
                      "
                      class="ntns"
                    >
                      <!-- 固定左侧 -->

                      <!-- <span title="固定左侧">
                      <svg-icon
                        slot="reference"
                        icon-class="icon_app_n"
                        @click="moveHandle('citiesRight', i, 'toLeft')"
                      />
                    </span> -->
                      <el-tooltip
                        content="固定在表格左侧"
                        placement="bottom"
                        effect="light"
                      >
                        <div
                          class="to_left"
                          @click="moveHandle('citiesRight', i, 'toLeft')"
                        ></div>
                      </el-tooltip>
                      <!-- 不固定 -->
                      <!-- <span title="不固定">
                      <svg-icon
                        slot="reference"
                        icon-class="icon_app_n"
                        @click="moveHandle('citiesRight', i)"
                      />
                    </span> -->
                      <el-tooltip
                        content="取消固定"
                        placement="bottom"
                        effect="light"
                      >
                        <div
                          class="no_fixd"
                          @click="moveHandle('citiesRight', i)"
                        ></div>
                      </el-tooltip>
                    </div>
                    <div
                      :class="[
                        'move',
                        'move_icon',
                        {
                          forbid:
                            element.forbid ||
                            !checkedCities.includes(element.prop),
                        },
                      ]"
                    ></div>
                  </div>
                </transition-group>
              </draggable>
            </el-checkbox-group>
          </div>
        </MyScrollbar>
      </div>
    </el-popover>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import MyScrollbar from '@/components/MyScrollbar'
  export default {
    components: {
      draggable,
      MyScrollbar,
    },
    props: {
      options: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        left: [],
        right: [],
        checkAll: false,
        isIndeterminate: true,
        disabledItem: '',
        citiesLeft: [],
        cities: [],
        citiesRight: [],
      }
    },
    computed: {
      citiesArray() {
        return [
          ...this.citiesLeft.map((item) => ({
            ...item,
            fixed: 'left',
            show: this.checkedCities.includes(item.prop),
          })),
          ...this.cities.map((item) => ({
            ...item,
            fixed: false,
            show: this.checkedCities.includes(item.prop),
          })),
          ...this.citiesRight.map((item) => ({
            ...item,
            fixed: 'right',
            show: this.checkedCities.includes(item.prop),
          })),
        ]
      },
      checkedCities: {
        get() {
          return this.options.filter(({ show }) => show).map(({ prop }) => prop)
        },
        set(val) {
          this.$emit(
            'update:options',
            this.options.map((item) => ({
              ...item,
              show: val.includes(item.prop),
            }))
          )
        },
      },
    },
    created() {
      this.infoCities()
    },
    methods: {
      infoCities() {
        this.citiesLeft = this.options.filter((item) => item.fixed === 'left')
        this.cities = this.options.filter((item) => !item.fixed)
        this.citiesRight = this.options.filter((item) => item.fixed === 'right')
      },
      handleCheckAllChange(val) {
        this.checkedCities = val ? this.options.map(({ prop }) => prop) : []
        this.isIndeterminate = false
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length
        this.checkAll = checkedCount === this.citiesArray.length
        this.isIndeterminate =
          checkedCount > 0 && checkedCount < this.citiesArray.length
      },
      reset() {
        this.checkedCities = this.options.map(({ prop }) => prop)
        this.checkAll = false
        this.isIndeterminate = true
      },
      start(e) {
        this.disabledItem = e.item._underlying_vm_.prop
      },
      end() {
        this.disabledItem = ''
        this.$emit('update:options', this.citiesArray)
      },
      // 移动当前元素
      moveHandle(form, i, to) {
        if (to == 'toLeft') {
          this.citiesLeft.push(this[form][i])
          this[form].splice(i, 1)
        } else if (to == 'toRight') {
          this.citiesRight.unshift(this[form][i])
          this[form].splice(i, 1)
        } else {
          if (form == 'citiesLeft') this.cities.unshift(this[form][i])
          else this.cities.push(this[form][i])
          this[form].splice(i, 1)
        }
        this.$emit('update:options', this.citiesArray)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .table-row-setup {
    // text-align: end;
    display: inline-block;
    &__icon {
      width: 18px;
      height: 18px;
      background-image: url('./img/base_icon_def.png');
      background-size: contain;
      &:hover {
        cursor: pointer;
        background-image: url('./img/base_icon_active.png');
      }
    }
  }
  .table-row-setup__popper {
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      padding: 0 8px;
      min-height: 40px;
    }
    .row-item {
      padding: 0 8px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .checkbox_item {
        flex: 1;
        display: flex;
        .el-checkbox {
          flex: 1;
        }
      }
      .ntns {
        display: none;
        cursor: pointer;
        & > * {
          margin-left: 4px;
          font-size: 20px;
        }
        .no_fixd {
          background-image: url('./img/no_fixd_def.png');
          background-size: contain;
          width: 16px;
          height: 16px;
          display: inline-block;
          &:hover {
            background-image: url('./img/no_fixd_active.png');
          }
        }
        .to_right {
          background-image: url('./img/to_right_def.png');
          background-size: contain;
          width: 16px;
          height: 16px;
          display: inline-block;
          &:hover {
            background-image: url('./img/to_right_active.png');
          }
        }
        .to_left {
          background-image: url('./img/to_left_def.png');
          background-size: contain;
          width: 16px;
          height: 16px;
          display: inline-block;
          &:hover {
            background-image: url('./img/to_left_active.png');
          }
        }
      }
      .move_icon {
        background-image: url('./img/move.png');
        background-size: contain;
        width: 16px;
        height: 16px;
        display: inline-block;
        &:hover {
          // background-image: url("./img/move_active.png");
        }
      }
      &:hover {
        .ntns {
          display: block;
        }
      }
    }
    .chosen {
      background-color: #fff;
    }
    .ghost {
      background-color: rgb(230, 247, 255);
    }
    .group-title {
      font-size: 12px;
      color: #ccc;
      padding: 5px 8px;
      margin: 0;
      user-select: none;
    }
  }
</style>
<style>
  .table-row-setup__popper {
    padding: 0;
  }
</style>
